<template>
  <div>
    <nly-breadcrumb>
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-home-fill"
        to="/"
        text="首页"
      />
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-outlet"
        to="/shop1/goods"
        active
        text="mini一番赏列表管理"
      />
    </nly-breadcrumb>
    <Modal v-model="modal2" width="1050px" @on-cancel="cancel">
      <p
        style="margin: 0; color: rgb(255, 102, 0); text-align: center"
        slot="header"
      >
        <span v-if="!update">
          <Icon type="ios-add-circle-outline" style="margin-right: 5px" />
          <span>添加</span>
        </span>
        <span v-else>
          <Icon type="md-create" style="margin-right: 5px" />
          <span>修改</span>
        </span>
      </p>
      <div>
        <div class="content" style="padding-left: 10px">
          <row>
            <i-col :md="6" :sm="12">
              <Input
                v-model="searchText"
                search
                placeholder="请输入商品名称搜索"
                enter-button="搜索"
                @on-search="searchgoods(searchText)"
              />
            </i-col>

            <i-col :md="10" :sm="14">
              <Select
                v-model="data.type_name"
                @on-change="change_type"
                style="width: 200px; margin-left: 16px"
                placeholder="请选择商品分类"
              >
                <Option
                  v-for="(item, index) in count_scale"
                  :value="item.type"
                  :key="index"
                  >{{ item.type }}</Option
                >
              </Select>
            </i-col>
          </row>
          <br />
          <Table
            border
            size="small"
            :columns="tableheadergoods"
            :data="goodslistgoods"
            @on-selection-change="enterall"
          >
            <template slot-scope="{ row }" slot="img">
              <img
                v-if="arrSplit(row.img)"
                :src="arrSplit(row.img)"
                width="60"
                height="60"
                style="padding: 3px"
                class="image"
              />
            </template>
          </Table>
        </div>
        <div class="Page">
          <Page
            :total="total"
            show-elevator
            show-total
            :page-size="data.pageSize"
            :current="data.page"
            @on-change="get_pagegoods"
          />
        </div>
      </div>
      <div slot="footer">
        <Button type="primary" :loading="loading" @click="save">保存</Button>
        <Button @click="modal2 = false">取消</Button>
      </div>
    </Modal>
    <Modal
      title="修改数量"
      :styles="{ width: '30%' }"
      v-model="modalText"
      class-name="vertical-center-modal"
      :footer-hide="true"
    >
      <div>
        <Form ref="data" :model="datas" :label-width="200">
          <FormItem label="一番赏产品数量(不能小于1)" prop="number" v-if="datas.rank!=='0'">
            <InputNumber
              :min="1"
              v-model="datas.number"
              :active-change="false"
              
              placeholder="请输入数量（不能小于1）"
            />
          </FormItem>
          <FormItem label="物品等级" prop="rank">
            <Select
              v-model="datas.rank"
              @on-change="change_typeone"
              style="width: 200px"
              placeholder="请选择物品等级"
            >
              <Option value="0">last最大奖</Option>
              <Option value="A">A奖</Option>
              <Option value="B">B奖</Option>
              <Option value="C">C奖</Option>
              <Option value="D">D奖</Option>
              <Option value="E">E奖</Option>
              <Option value="F">F奖</Option>
              <Option value="G">G奖</Option>
              <Option value="H">H奖</Option>
              <Option value="I">I奖</Option>
              <Option value="J">J奖</Option>
              <Option value="K">K奖</Option>
              <Option value="L">L奖</Option>
              <Option value="M">M奖</Option>
              <Option value="N">N奖</Option>
              <Option value="O">O奖</Option>
              <Option value="P">P奖</Option>
              <Option value="Q">Q奖</Option>
              <Option value="R">R奖</Option>
              <Option value="S">S奖</Option>
              <Option value="T">T奖</Option>
              <Option value="U">U奖</Option>
              <Option value="V">V奖</Option>
              <Option value="W">W奖</Option>
              <Option value="X">X奖</Option>
              <Option value="Y">Y奖</Option>
              <Option value="Z">Z奖</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="AddText('data')">提交</Button>
            <Button @click="modalTextcal()" style="margin-left: 8px"
              >取消</Button
            >
          </FormItem>
        </Form>
      </div>
    </Modal>
    <div class="content" style="padding-left: 10px">
      <row>
        <i-col :md="6" :sm="12">
          <Input
            v-model="searchText"
            search
            placeholder="请输入名称搜索"
            enter-button="搜索"
            @on-search="search(searchText)"
          />
        </i-col>
        <i-col :md="10" :sm="12">
          <i-button
            type="primary"
            style="margin-left: 16px"
            @click="create"
            icon="md-add"
            >添加一番赏</i-button
          >
        </i-col>
      </row>
      <br />
      <Table
        border
        size="small"
        :columns="tableheader"
        :data="goodslist"
        @on-selection-change="enterall"
      >
        <template slot-scope="{ row }" slot="img">
          <img
            :src="row.img"
            width="60"
            height="60"
            style="padding: 3px"
            class="image"
          />
        </template>
        <template slot-scope="{ row }" slot="rank">{{
          row.rank == 0 ? "last最大奖" : row.rank + "奖"
        }}</template>

        <template slot-scope="{ row }" slot="action">
          <Button
            style="margin-left: 16px"
            type="primary"
            size="small"
            @click="changenum(row)"
            >修改等级数量</Button
          >
          <Button
            style="margin-left: 16px"
            type="error"
            size="small"
            @click="remove(row.id)"
            icon="md-close"
            >删除</Button
          >
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
import apis from "@/api/shop1";
export default {
  components: {},
  data() {
    return {
      count_scale: [], 
      go_home_page: [],
      classname: [],
      videolist: [],
      searchText: "",
      update: false,
      total: 0, 
      modalText: false,
      modal2: false,
      loading: false,
      data: {
        page: 1,
        pageSize: 10,
        name: "",
        type_name: "",
      },
      datas: {
        rank: "",
      },
      tableheadergoods: [
        {
          type: "selection",
          width: 100,
          align: "center",
        },
        {
          title: "ID",
          key: "id",
          width: 90,
          align: "center",
        },
        {
          title: "商品名称",
          key: "name",
          align: "center",
          tooltip: true,
        },
        {
          title: "图片",
          slot: "img",
          width: 230,
          align: "center",
        },
        {
          title: "金额",
          key: "price",
          align: "center",
        },
        {
          title: "数量",
          key: "inventory",
          align: "center",
        },

        {
          title: "预售时间",
          key: "sellTime",
          align: "center",
        },
        {
          title: "排序值",
          key: "sort",
          align: "center",
        },
      ],
      goodslistgoods: [],
      dataText: {
        img: "",
        name: "",
        price: "",
        type: 1,
        state: 1,
      },
      tableheader: [
        {
          title: "所属一番赏名称",
          key: "name",
          align: "center",
          tooltip: true,
        },
        {
          title: "所属一番赏图片",
          slot: "img",
          align: "center",
        },
        {
          title: "物品等级",
          slot: "rank",
          width: 180,
          align: "center",
        },
        {
          title: "数量",
          key: "countnumber",
          align: "center",
          tooltip: true,
        },
        {
          title: "操作",
          slot: "action",
          width: 300,
          fixed: "right",
          align: "center",
        },
      ],
      goodslist: [],
      enteralldata: [],
    };
  },
  created() {
    this.getperson();
    this.getGoods();
    this.lookrecord();
  },
  methods: {
    modalTextcal() {
      this.modalText = false;
    },
    change_typeone(val) {
      console.log(val);
      this.datas.rank = "";
      this.datas.rank = val;
    },
    change_typetwo(val) {
      console.log(val);
      this.datas.typeId = "";
      this.datas.typeId = val;
    },

    changenum(row) {
      console.log(row.rank)
      this.datas.rank = row.rank + "";
      this.datas.number = row.number
      this.modalText = true;
      this.datas.mallId = row.mallId;
      this.datas.boxId = this.$route.query.id;
    },
    AddText(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = this.datas;
          console.log(data);
          apis.changemininrank(data).then((response) => {
            if (response.data.code == 0) {
              this.modalText = false;
              this.$Message.success("修改成功");
              this.datas.rank = "";
              this.datas.id = "";
              this.$refs.data.resetFields();
              this.getperson();
            } else if (response.data.code == 502) {
              this.$Message.error("资源已存在");
            } else {
              this.$Message.error("修改失败");
            }
          });
        } else {
          this.modalText = false;
          this.$Message.error("Fail!");
          this.$refs.data.resetFields();
        }
      });
    },
    enterall(e) {
      this.enteralldata = e;
      console.log(e);
    },
    getGoods() {
      apis.getGoods(this.data).then((response) => {
        if (response.data.code == 0) {
          this.goodslistgoods = response.data.data.list;
          this.go_home_page = (this.goodslistgoods.img || "").split(",");

          this.total = response.data.data.total;
        } else {
          this.$Message.error("请求失败!");
        }
      });
    },
    get_pagegoods(page) {
      this.data.page = page;
      this.getGoods();
    },
    change_type(val) {
      console.log(val);
      this.data.type_name = "";
      this.data.type_name = val;
      this.getGoods();
    },
    searchgoods(val) {
      this.data.page = 1;
      let data = this.data;
      data.name = val;
      this.getGoods();
    },
    lookrecord() {
      var _this = this;
      apis
        .gettypelist({
          page: 1,
          pageSize: 100000,
        })
        .then((response) => {
          console.log(response);
          if (response.data.code == 0) {
            _this.count_scale = response.data.data.list;
            this.loading = false;
          } else {
            this.$Message.error("请求失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
          this.$Message.error("请求失败!");
        });
    },
    arrSplit(str) {
      if ((str || "").split(",")[0]) {
        return str.split(",")[0];
      } else {
        return "";
      }
    },
    change_upNew(id, val) {
      let data = {
        id: id,
        state: val,
      };
      apis
        .uplist(data)
        .then((response) => {
          if (response.data.code == 0) {
            this.$Message.success("修改成功");
          } else {
            this.$Message.error("修改失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$Message.error("修改失败!");
        });
    },
    deleteimg(index) {
      this.go_home_page.splice(index, 1);
    },
    confirm_images(val) {
      console.log(val);
      this.dataText.img = val[0];
    },

    deletevideo(index) {
      this.videolist.splice(index, 1);
    },
    confirm_video(val) {
      this.videolist.push(...val);
    },
    getperson() {
      apis
        .getlistminione({
          boxId: this.$route.query.id,
        })
        .then((response) => {
          if (response.data.code == 0) {
            this.goodslist = response.data.data;
            this.total = response.data.data.countNumber;
          } else {
            this.$Message.error("请求失败!");
          }
        });
    },
    get_page(page) {
      this.data.page = page;
      this.getperson();
    },
    search(val) {
      this.data.page = 1;
      let data = this.data;
      data.name = val;
      this.getperson();
    },
    create() {
      this.modal2 = true;
      this.update = false;
    },
    changegoods(e) {
      console.log(e);
      this.dataText.name = e.name;
      this.dataText.img = e.img;
      this.dataText.price = e.price;
      this.dataText.id = e.id;
      this.modal2 = true;
      this.update = true;
    },
    save() {
      this.loading = true;

      this.enteralldata.map((itme) => {
        itme.boxId = this.$route.query.id;
        itme.rank = "1";
      });
      apis
        .addlistminione({
          jsonObject: JSON.stringify(this.enteralldata),
        })
        .then((response) => {
          this.loading = false;
          if (response.data.code == 0) {
            this.$Message.success("添加成功！");
            this.modal2 = false;
            this.getperson();
          } else {
            this.$Message.error("添加失败");
          }
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
          this.$Message.error("添加失败!");
        });
    },
    remove(id) {
      this.$Modal.confirm({
        title: "删除确认",
        content: `确定删除该类型一番赏小盒子？删除后无法恢复`,
        onOk: () => {
          apis
            .delete_listminione({
              id: id,
              boxId: this.$route.query.id,
            })
            .then((response) => {
              if (response.data.code == 0) {
                this.getperson();
                this.$Message.success("删除成功");
              } else {
                this.$Message.error("删除失败");
              }
            })
            .catch((error) => {
              console.log(error);
              this.$Message.error("删除失败!");
            });
        },
        onCancel: () => {},
      });
    },
    cancel() {
      this.modal2 = false;
      this.update = false;
    },
  },
};
</script>

<style scoped>
.ivu-modal {
  width: 50% !important;
}

.ivu-btn {
  margin-bottom: 0px;
}

.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}

.image {
  max-width: 400px;
  max-height: 200px;
  margin: 10px;
}

.formItemImage {
  display: flex;
  justify-items: left;
  align-items: center;
  flex-wrap: wrap;
}

.formItemImage .ivu-col {
  margin-bottom: 16px;
}

.formItemImage img {
  height: 100%;
}

.button_large {
  padding: 0px 20px;
}

.ivu-input-number {
  width: 100% !important;
}
</style>